<!-- Header -->
<header id="header" class="shadow-primary-xs">
    <!-- Navbar -->
    <div class="container position-relative">
        <nav class="navbar navbar-expand-lg navbar-light justify-content-lg-between justify-content-md-inherit">

            <div class="align-items-start">

                <!-- mobile menu button : show -->
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMainNav" aria-controls="navbarMainNav" aria-expanded="false" aria-label="Toggle navigation">
								<svg width="25" viewBox="0 0 20 20">
									<path d="M 19.9876 1.998 L -0.0108 1.998 L -0.0108 -0.0019 L 19.9876 -0.0019 L 19.9876 1.998 Z"></path>
									<path d="M 19.9876 7.9979 L -0.0108 7.9979 L -0.0108 5.9979 L 19.9876 5.9979 L 19.9876 7.9979 Z"></path>
									<path d="M 19.9876 13.9977 L -0.0108 13.9977 L -0.0108 11.9978 L 19.9876 11.9978 L 19.9876 13.9977 Z"></path>
									<path d="M 19.9876 19.9976 L -0.0108 19.9976 L -0.0108 17.9976 L 19.9876 17.9976 L 19.9876 19.9976 Z"></path>
								</svg>
							</button>

                <!-- navbar : brand (logo) -->
                <a class="navbar-brand" href="/">
                    <img src="/public/cms/{{'cms'|@template('path')}}/images/logo/logo_dark.svg?v={{'cms'|@template('version')}}" width="145" height="38" alt="...">
                    {%if logo==='light'%}
                    <img src="/public/cms/{{'cms'|@template('path')}}/images/logo/logo_light.svg?v={{'cms'|@template('version')}}" width="145" height="38" alt="...">
                    {%endif%}
                </a>

            </div>




            <!-- Menu -->
            <!--

							Dropdown Classes (should be added to primary .dropdown-menu only, dropdown childs are also affected)
								.dropdown-menu-dark 		- dark dropdown (desktop only, will be white on mobile)
								.dropdown-menu-hover 		- open on hover
								.dropdown-menu-clean 		- no background color on hover
								.dropdown-menu-invert 		- open dropdown in oposite direction (left|right, according to RTL|LTR)
								.dropdown-menu-uppercase 	- uppercase text (font-size is scalled down to 13px)
								.dropdown-click-ignore 		- keep dropdown open on inside click (useful on forms inside dropdown)

								Repositioning long dropdown childs (Example: Pages->Account)
									.dropdown-menu-up-n100 		- open up with top: -100px
									.dropdown-menu-up-n100 		- open up with top: -150px
									.dropdown-menu-up-n180 		- open up with top: -180px
									.dropdown-menu-up-n220 		- open up with top: -220px
									.dropdown-menu-up-n250 		- open up with top: -250px
									.dropdown-menu-up 			- open up without negative class


								Dropdown prefix icon (optional, if enabled in variables.scss)
									.prefix-link-icon .prefix-icon-dot 		- link prefix
									.prefix-link-icon .prefix-icon-line 	- link prefix
									.prefix-link-icon .prefix-icon-ico 		- link prefix
									.prefix-link-icon .prefix-icon-arrow 	- link prefix

								.nav-link.nav-link-caret-hide 	- no dropdown icon indicator on main link
								.nav-item.dropdown-mega 		- required ONLY on fullwidth mega menu

								Mobile animation - add to .navbar-collapse:
								.navbar-animate-fadein
								.navbar-animate-fadeinup
								.navbar-animate-bouncein

						-->
            <div class="collapse navbar-collapse navbar-animate-fadein" id="navbarMainNav">


                <!-- navbar : mobile menu -->
                <div class="navbar-xs d-none">
                    <!-- .sticky-top -->

                    <!-- mobile menu button : close -->
                    <button class="navbar-toggler pt-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMainNav" aria-controls="navbarMainNav" aria-expanded="false" aria-label="Toggle navigation">
									<svg width="20" viewBox="0 0 20 20">
										<path d="M 20.7895 0.977 L 19.3752 -0.4364 L 10.081 8.8522 L 0.7869 -0.4364 L -0.6274 0.977 L 8.6668 10.2656 L -0.6274 19.5542 L 0.7869 20.9676 L 10.081 11.679 L 19.3752 20.9676 L 20.7895 19.5542 L 11.4953 10.2656 L 20.7895 0.977 Z"></path>
									</svg>
								</button>

                    <!-- 
									Mobile Menu Logo 
									Logo : height: 70px max
								-->
                    <a class="navbar-brand" href="index.html">
                        <img src="/public/cms/{{'cms'|@template('path')}}/images/logo/logo_dark.svg" width="140" height="38" alt="...">
                    </a>

                </div>
                <!-- /navbar : mobile menu -->



                <!-- navbar : navigation -->
                <ul class="navbar-nav">
                    <!-- Menu -->
                    <!--

									Dropdown Classes (should be added to primary .dropdown-menu only, dropdown childs are also affected)
										.dropdown-menu-dark 		- dark dropdown (desktop only, will be white on mobile)
										.dropdown-menu-hover 		- open on hover
										.dropdown-menu-clean 		- no background color on hover
										.dropdown-menu-invert 		- open dropdown in oposite direction (left|right, according to RTL|LTR)
										.dropdown-menu-uppercase 	- uppercase text (font-size is scalled down to 13px)
										.dropdown-click-ignore 		- keep dropdown open on inside click (useful on forms inside dropdown)

										Repositioning long dropdown childs (Example: Pages->Account)
											.dropdown-menu-up-n100 		- open up with top: -100px
											.dropdown-menu-up-n100 		- open up with top: -150px
											.dropdown-menu-up-n180 		- open up with top: -180px
											.dropdown-menu-up-n220 		- open up with top: -220px
											.dropdown-menu-up-n250 		- open up with top: -250px
											.dropdown-menu-up 			- open up without negative class


										Dropdown prefix icon (optional, if enabled in variables.scss)
											.prefix-link-icon .prefix-icon-dot 		- link prefix
											.prefix-link-icon .prefix-icon-line 	- link prefix
											.prefix-link-icon .prefix-icon-ico 		- link prefix
											.prefix-link-icon .prefix-icon-arrow 	- link prefix

										.nav-link.nav-link-caret-hide 	- no dropdown icon indicator on main link
										.nav-item.dropdown-mega 		- required ONLY on fullwidth mega menu

								-->
                    <!-- mobile only image + simple search (d-block d-sm-none) -->
                    <li class="nav-item d-block d-sm-none">

                        <!-- image -->
                        <div class="mb-4">
                            <img width="600" height="600" class="img-fluid" src="/public/assets/demo.files/svg/artworks/people_crossbrowser.svg" alt="...">
                        </div>

                        <!-- search -->
                        {#
                        <form method="get" action="#!search"
                            class="input-group-over mb-4 bg-light p-2 form-control-pill">
                            <input type="text" name="keyword" value="" placeholder="Quick search..." class="form-control border-dashed">
                            <button class="btn btn-sm fi fi-search mx-3"></button>
                        </form>
                        #}
                    </li>
                    {%for item in 'header'|@navigation%}
                    <li class="nav-item dropdown">
                        <a href="{{item.url}}" {%if item.children%}id="nav_{{item.id}}" data-bs-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false" {%endif%} {%if item.target%}target="_blank"
                            {%endif%} class="nav-link {%if item.children%}dropdown-toggle{%endif%}">
                            {{item.title}}
                        </a>
                        {%if item.children%}
                        <div aria-labelledby="nav_{{item.id}}"
                            class="dropdown-menu dropdown-menu-clean dropdown-menu-hover dropdown-fadeinup">
                            <ul class="list-unstyled m-0 p-0">
                                {%for _item in item.children%}
                                <li class="dropdown-item dropdown">
                                    <a class="dropdown-link" href="{{_item.url}}" {%if
                                        _item.children%}data-bs-toggle="dropdown" {%endif%} {%if
                                        _item.target%}target="_blank" {%endif%}>{{_item.title}}</a>
                                    {%if _item.children%}
                                    <ul
                                        class="dropdown-menu dropdown-menu-hover dropdown-menu-block-md shadow-lg rounded-xl border-0 m-0">
                                        {%for __item in _item.children%}
                                        <li class="dropdown-item"><a href="{{__item.url}}" {%if
                                                __item.target%}target="_blank" {%endif%}
                                                class="dropdown-link">{{__item.title}}</a></li>
                                        {%endfor%}
                                    </ul>
                                    {%endif%}
                                </li>
                                {%endfor%}
                            </ul>
                        </div>
                        {%endif%}
                    </li>
                    {%endfor%}

                    <!-- social icons : mobile only -->
                    {#
                    <li class="nav-item d-block d-sm-none text-center mb-4">

                        <h3 class="h6 text-muted">Follow Us</h3>

                        <!-- facebook -->
                        <a href="#" class="btn btn-sm btn-facebook transition-hover-top mb-2 rounded-circle text-white"
                            rel="noopener">
                            <i class="fi fi-social-facebook"></i>
                        </a>

                        <!-- twitter -->
                        <a href="#" class="btn btn-sm btn-twitter transition-hover-top mb-2 rounded-circle text-white"
                            rel="noopener">
                            <i class="fi fi-social-twitter"></i>
                        </a>

                        <!-- linkedin -->
                        <a href="#" class="btn btn-sm btn-linkedin transition-hover-top mb-2 rounded-circle text-white"
                            rel="noopener">
                            <i class="fi fi-social-linkedin"></i>
                        </a>

                        <!-- youtube -->
                        <a href="#" class="btn btn-sm btn-youtube transition-hover-top mb-2 rounded-circle text-white"
                            rel="noopener">
                            <i class="fi fi-social-youtube"></i>
                        </a>

                    </li>



                    <!-- Get Smarty : mobile only (d-block d-sm-none)-->
                    <li class="nav-item d-block d-sm-none">
                        <a target="_blank" href="#buy_now" class="btn w-100 btn-primary shadow-none text-white m-0">
                            Get Smarty
                        </a>
                    </li>
                    #}
                </ul>
                <!-- /navbar : navigation -->


            </div>





            <!-- OPTIONS -->
            <ul class="list-inline list-unstyled mb-0 d-flex align-items-end">
                {%if ctx.userInfo%}
                <li class="list-inline-item mx-1 dropdown">

                    <a href="#" aria-label="Account Options" id="dropdownAccountOptions"
                        class="btn btn-sm rounded-circle btn-light bg-transparent text-muted shadow-none"
                        data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
                        <span class="group-icon">
										{%if ctx.userInfo.avatar %}
										<i class="fi avatar avatar-xs rounded-circle" style="background-image:url({{ctx.userInfo.avatar}})"></i>
										{%else%}
										<i class="fi fi-users"></i>
										{%endif%}
										<i class="fi fi-close"></i>
									</span>
                    </a>


                    <!--
									
									Dropdown Classes
										.dropdown-menu-dark 		- dark dropdown (desktop only, will be white on mobile)
										.dropdown-menu-hover 		- open on hover
										.dropdown-menu-clean 		- no background color on hover
										.dropdown-menu-invert 		- open dropdown in oposite direction (left|right, according to RTL|LTR)
										.dropdown-click-ignore 		- keep dropdown open on inside click (useful on forms inside dropdown)

										Dropdown prefix icon (optional, if enabled in variables.scss)
											.prefix-link-icon .prefix-icon-dot 		- link prefix
											.prefix-link-icon .prefix-icon-line 	- link prefix
											.prefix-link-icon .prefix-icon-ico 		- link prefix
											.prefix-link-icon .prefix-icon-arrow 	- link prefix

											.prefix-icon-ignore 					- ignore, do not use on a specific link

								-->
                    <!-- dropdown -->
                    <div aria-labelledby="dropdownAccountOptions"
                        class="list-unstyled dropdown-menu dropdown-menu-clean dropdown-click-ignore end-0 py-2 rounded-xl"
                        style="min-width:215px;">

                        <div class="dropdown-header px-4 mb-1 text-wrap fw-medium">{{ctx.userInfo.username}}</div>
                        <div class="dropdown-divider mb-3"></div>
                        <a class="dropdown-item active" href="/mc/index">
                            <svg class="text-gray-600 float-start" width="18px" height="18px" viewBox="0 0 16 16"
                                xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                                <path fill-rule="evenodd"
                                    d="M8 3.293l6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z">
                                </path>
                                <path fill-rule="evenodd"
                                    d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z">
                                </path>
                            </svg>
                            <span>会员中心</span>
                        </a>
                      
                        <a class="dropdown-item" href="/mc/setup">
                            <svg class="text-gray-600 float-start" width="18px" height="18px" viewBox="0 0 16 16"
                                xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                                <path fill-rule="evenodd"
                                    d="M.102 2.223A3.004 3.004 0 0 0 3.78 5.897l6.341 6.252A3.003 3.003 0 0 0 13 16a3 3 0 1 0-.851-5.878L5.897 3.781A3.004 3.004 0 0 0 2.223.1l2.141 2.142L4 4l-1.757.364L.102 2.223zm13.37 9.019L13 11l-.471.242-.529.026-.287.445-.445.287-.026.529L11 13l.242.471.026.529.445.287.287.445.529.026L13 15l.471-.242.529-.026.287-.445.445-.287.026-.529L15 13l-.242-.471-.026-.529-.445-.287-.287-.445-.529-.026z">
                                </path>
                            </svg>
                            <span>账户设置</span>
                        </a>
                        <div class="dropdown-divider mt-3"></div>
                        <a href="/mc/logout" title="退出登录" class="dropdown-item mt-1">
                            <i class="fi fi-power float-start"></i>
                            退出登录
                        </a>
                    </div>

                </li>
                {%else%}
                <li class="list-inline-item mx-1 dropdown">
                    <a href="#" data-href="/mc/login" data-ajax-modal-container="#mc_login" data-ajax-modal-size=""
                        data-ajax-modal-centered="true" data-ajax-modal-callback-function=""
                        class="js-ajax-modal btn btn-sm btn-primary bg-gradient" data-bs-toggle="tooltip"
                        data-bs-placement="bottom" title="登录/注册">
                        登录
                    </a>
                </li>
                {%endif%}
            </ul>
            <!-- /OPTIONS -->
        </nav>

    </div>
    <!-- /Navbar -->

</header>
<!-- /Header -->

<!-- custom structure -->
<div id="mc_login" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog" role="document">

        <div class="modal-content">
            <!-- content added by ajax -->
        </div>

    </div>
</div>